import { Switch, Route } from "react-router-dom/cjs/react-router-dom.min";
import Header from "./Header";
import Home from "./Home";
import Podcast from "./Podcast";
import User from "./User";
import AllPodcasts from "./AllPodcasts";
import Episode from "./Episode";
import { DataProvider } from "./context/DataContext";
import Login from "./Login";
import Signup from "./Signup";
import EditUser from "./EditUser";
import PostPodcast from "./PostPodcast";
import EditPodcast from "./EditPodcast";
import PostEpisode from "./PostEpisode";
import EditEpisode from "./EditEpisode";

const App = () => {

  return (
    <div className="
      App 
      d-flex
      flex-column
    " style={{ "minHeight": "100%" }}>
      <DataProvider>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/podcasts" component={AllPodcasts} />
          <Route exact path="/podcasts/:id" component={Podcast} />
          <Route path="/podcasts/:id/post-episode" component={PostEpisode} />
          <Route path="/users/:id" component={User} />
          <Route path="/episodes/:id" component={Episode} />
          <Route path="/login" component={Login} />
          <Route path="/signup" component={Signup} />
          <Route path="/edit-user" component={EditUser} />
          <Route path="/post-podcast" component={PostPodcast} />
          <Route path="/edit-podcast/:id" component={EditPodcast} />
          <Route path="/edit-episode/:id" component={EditEpisode} />
        </Switch>
      </DataProvider>
    </div>
  );
};

export default App;
